
<html>
<head>
  <title>pdf.js - create basic pdf files in the browser and node.js</title>
  <style type="text/css">
    * { padding: 0; margin: 0; }
    body {
      padding: 30px;
      font-family: Arial, Helvetica, sans-serif;
    }
    h1 {
      margin-bottom: 1em;
      border-bottom: 1px solid #ccc;
    }
    
    h2 {
      margin-bottom: 1em;
      border-bottom: 1px solid #ccc;
    }
    
    pre {
      border: 1px dotted #ccc;
      background: #f7f7f7;
      padding: 10px;
      margin-bottom: 1em;
    }
        
        h1 {
            margin-bottom: 0.7em;
        }
        
        h2 {
            margin-top: 1em;
        }
        .box{ width:100%; height:500px;}
        #theCode{}
        #theFrame{ display:none;}
  </style>
  <script type="text/javascript" src="./lib/pdf.js"></script>
  <!-- jquery not required, just use this this demo page -->
  <script type="text/javascript" src="./vendor/jquery.js"></script>


  <script type="text/javascript">
  
    $(document).ready(function(){
      
      $('#run').click(function(e){
        // do an eval
        eval($('#theCode').val());
      });
      
    });
  
  </script>

</head>

<body>

<h1>pdf.js - create basic pdf files in the browser and node.js</h1>


<h3>demo -
this uses <a href = "http://en.wikipedia.org/wiki/Data_URI_scheme" target = "_blank">dataURIs</a> and they kinda suck. the <a href = "http://github.com/marak/pdf.js">
node.js</a> version is better.</h3><br/>
<form>
<input type = "button" id = "run" name = "run" value = "click here to create example pdf" /> 
<span id = "pdfLink"></span>
<br/>
<textarea id = "theCode" class = "box">
  /* create the PDF document */
  
    var doc = new pdf();
    doc.text(20, 20, 'hello, I am PDF.');
    doc.setFont('Courier');
    doc.text(20, 30, 'i was created in the browser using javascript.');
    doc.setFont('Times-Roman');
    doc.text(20, 40, 'i can also be created from node.js');
  
    /* optional - set properties on the document */
    doc.setProperties({
      title: 'A sample document created by pdf.js',
      subject: 'PDFs are kinda cool, i guess',    
      author: 'Marak Squires',
      keywords: 'pdf.js, javascript, Marak, Marak Squires',
      creator: 'pdf.js'
    });
    doc.addPage();

    doc.setFontSize(22);
    doc.setFont('Verdana');
    doc.text(20, 20, 'This is a title');

    doc.setFontSize(16);
    doc.text(20, 30, 'You can also override page fonts with text method', 'Times-Roman');
    doc.text(20, 40, 'Monaco -This is some normal sized text underneath.', 'Monaco');
    doc.text(20, 50, 'Times-Roman - This is some normal sized text underneath.', 'Times-Roman');
    doc.text(20, 60, 'Helvetica - This is some normal sized text underneath.', 'Helvetica');
    doc.text(20, 70, 'Courier - This is some normal sized text.', 'Courier');

    doc.drawLine(100, 100, 100, 120, 1.0, 'dashed');
    doc.drawLine(100, 100, 120, 100, 1.2, 'dotted');
    doc.drawLine(120, 120, 100, 120, 1.4, 'dashed');
    doc.drawLine(120, 120, 120, 100, 1.6, 'solid');

    doc.drawRect(140, 140, 10, 10, 'solid');
    
    var fileName = "testFile"+new Date().getSeconds()+".pdf";
    var pdfAsDataURI = doc.output('datauri', {"fileName":fileName});

  /* inject the pdf into the browser */
  
    // inject using an iframe
    // this seems to work in FF but not Chrome? try testing some more on your own >.<
    //$('#theFrame').attr('src',pdfAsDataURI);

    // inject using an object tag
    // doesnt really work but it does something interesting
    //$('body').append('<object data="'+pdfAsDataURI+'" type="application/pdf"></object>');

    // inject changing document.location
    // doesn't work in FF, kinda works in Chrome. this method is a bit brutal as the user sees a huge URL
    // document.location = pdfAsDataURI;

    // create a link
    // this seems to always work, except clicking the link destroys my FF instantly 
    $('#pdfLink').html('<a href = "'+pdfAsDataURI+'">'+fileName+'</a> <span class = "helper">right click and save file as pdf</span');


</textarea>
</form>
<iframe id = "theFrame"></iframe>

<a href = "http://github.com/marak/pdf.js/">
<img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" style="position: absolute; z-index: 10; top: 0pt; right: 0pt; border: 0pt none;">
</a>
</body>
</html>